<template>
  <div class="where-to-go-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="module in moduleList" :key="module.id">
        <el-card class="module-card" shadow="hover" @click.native="showOptions(module)">
          <div class="module-header">
            <i :class="module.icon || 'el-icon-location'"></i>
            <h3>{{ module.title }}</h3>
          </div>
          <div class="module-description">
            {{ module.description }}
          </div>
          <div class="module-options">
            <el-tag 
              v-for="option in module.options ? module.options.slice(0, 3) : []" 
              :key="option.id" 
              size="small" 
              type="info"
              class="option-tag"
            >
              {{ option.name }}
            </el-tag>
            <span v-if="module.options && module.options.length > 3" class="more-options">
              +{{ module.options.length - 3 }}
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 选项选择对话框 -->
    <el-dialog 
      :title="currentModule ? currentModule.title : '选择'" 
      :visible.sync="dialogVisible" 
      width="600px"
      :before-close="handleClose"
    >
      <div class="options-container">
        <div class="options-grid">
          <div 
            v-for="option in currentOptions" 
            :key="option.id"
            class="option-item"
            @click="selectOption(option)"
          >
            <div class="option-content">
              <div class="option-name">{{ option.name }}</div>
              <div class="option-type">{{ option.type }}</div>
              <div class="option-description">{{ option.description }}</div>
            </div>
            <div class="option-popularity">
              <el-rate 
                v-model="option.popularity" 
                :max="5" 
                disabled 
                show-score 
                text-color="#ff9900"
              />
            </div>
          </div>
        </div>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="randomSelect">随机选择</el-button>
      </div>
    </el-dialog>

    <!-- 结果展示对话框 -->
    <el-dialog 
      title="选择结果" 
      :visible.sync="resultVisible" 
      width="400px"
      center
    >
      <div class="result-container">
        <div class="result-icon">
          <i class="el-icon-check-circle"></i>
        </div>
        <div class="result-title">您选择了：</div>
        <div class="result-content">
          <h2>{{ selectedOption.name }}</h2>
          <p>{{ selectedOption.description }}</p>
          <el-tag type="success">{{ selectedOption.type }}</el-tag>
        </div>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="resultVisible = false">确定</el-button>
        <el-button type="primary" @click="selectAnother">再选一次</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listWhereToGoModuleWithOptions } from "@/api/play/whereToGoModule";
import { recordUserChoice } from "@/api/play/whereToGoUserChoice";

export default {
  name: "WhereToGoDisplay",
  data() {
    return {
      moduleList: [],
      dialogVisible: false,
      resultVisible: false,
      currentModule: null,
      currentOptions: [],
      selectedOption: null
    };
  },
  created() {
    this.loadModules();
  },
  methods: {
    // 加载模块数据
    loadModules() {
      listWhereToGoModuleWithOptions({ status: '0' }).then(response => {
        this.moduleList = response.data || [];
      });
    },
    
    // 显示选项
    showOptions(module) {
      this.currentModule = module;
      this.currentOptions = module.options || [];
      this.dialogVisible = true;
    },
    
    // 选择选项
    selectOption(option) {
      this.selectedOption = option;
      this.dialogVisible = false;
      this.resultVisible = true;
      
      // 更新热度值（这里可以调用后端API）
      this.updateOptionPopularity(option.id);
    },
    
    // 随机选择
    randomSelect() {
      if (this.currentOptions.length === 0) {
        this.$message.warning('没有可选择的选项');
        return;
      }
      
      const randomIndex = Math.floor(Math.random() * this.currentOptions.length);
      const randomOption = this.currentOptions[randomIndex];
      this.selectOption(randomOption);
    },
    
    // 更新选项热度值
    updateOptionPopularity(optionId) {
      // 调用后端API更新热度值
      recordUserChoice({
        userId: 1, // 这里可以从用户登录信息获取
        moduleId: this.currentModule.id,
        optionId: optionId,
        ipAddress: '127.0.0.1', // 这里可以从请求中获取
        deviceInfo: navigator.userAgent
      }).then(response => {
        console.log('用户选择记录已保存');
      }).catch(error => {
        console.error('保存用户选择记录失败:', error);
      });
    },
    
    // 再选一次
    selectAnother() {
      this.resultVisible = false;
      this.dialogVisible = true;
    },
    
    // 关闭对话框
    handleClose(done) {
      this.currentModule = null;
      this.currentOptions = [];
      done();
    }
  }
};
</script>

<style scoped>
.where-to-go-container {
  padding: 20px;
}

.module-card {
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 20px;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.module-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.module-header i {
  font-size: 24px;
  color: #409EFF;
  margin-right: 10px;
}

.module-header h3 {
  margin: 0;
  color: #303133;
}

.module-description {
  color: #606266;
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.4;
}

.module-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.option-tag {
  margin-right: 5px;
}

.more-options {
  color: #909399;
  font-size: 12px;
  line-height: 20px;
}

.options-container {
  max-height: 400px;
  overflow-y: auto;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.option-item {
  border: 1px solid #EBEEF5;
  border-radius: 6px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.option-item:hover {
  border-color: #409EFF;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.option-content {
  margin-bottom: 10px;
}

.option-name {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.option-type {
  color: #409EFF;
  font-size: 12px;
  margin-bottom: 5px;
}

.option-description {
  color: #606266;
  font-size: 14px;
  line-height: 1.4;
}

.option-popularity {
  text-align: center;
}

.result-container {
  text-align: center;
  padding: 20px 0;
}

.result-icon {
  font-size: 60px;
  color: #67C23A;
  margin-bottom: 20px;
}

.result-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 15px;
}

.result-content h2 {
  color: #303133;
  margin: 15px 0;
}

.result-content p {
  color: #606266;
  margin-bottom: 15px;
}

.dialog-footer {
  text-align: center;
}
</style> 